<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            width: 500px;
            height: 800px;
            background-color: gray;
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }
    </style>
</head>

<body>
    <form action="">
        用户名：<input type="text" name="" id="user" placeholder="字母开头，长度6-20"><span></span><br>
        昵称：<input type="text" name="" id="nic" placeholder="3-6个中文"><span></span><br>
        电子邮箱：<input type="text" name="" id="mail" placeholder=""><span></span><br>
        身份证：<input type="text" name="" id="pid" placeholder="18位，最后面可以是X"><span></span><br>
        手机号码：<input type="text" name="" id="phone" placeholder="开头必须是 1,第二位必须是 345678 还剩下9位是数字"><span></span><br>
        生日验证：<input type="text" name="" id="birthday" placeholder="年月日连接可以是/或者-或者不用"><span></span><br>
        密码：<input type="text" name="" id="psw" placeholder="+ 长度小于20，不能包含空格"><span></span><br>
        确认密码：<input type="text" name="" id="rePsw" placeholder="密码需要一致"><span></span><br>
        <button>注册</button>
    </form>
    <script>
        // 用户名
        var user = document.getElementById('user')
        user.onblur = function () {
            let reg = /^[a-zA-Z][\w-]{5,19}$/
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        // 昵称
        var nic = document.getElementById('nic')
        nic.onblur = function () {
            let reg = /^[\u4e00-\u9fa5]{3,6}$/
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        //电子邮件
        /*
        + 163邮箱：
        + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
        + @后面的域名只能是163
        + 域名后缀（.com .cn .net）可以有多个。
        */
        var mail = document.getElementById('mail')
        mail.onblur = function () {
            let reg = /^[a-zA-Z]\w+@163(\.com|\.cn|\.net)$/
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        //身份证
        var pid = document.getElementById('pid')
        pid.onblur = function () {
            let reg = /^([1-9][0-9]{17}|[1-9][0-9]{16}X)$/ig
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        //手机号码
        var phone = document.getElementById('phone')
        phone.onblur = function () {
            let reg = /^1(3|4|5|6|7|8)\d{9}$/ig
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        //生日验证
        var birthday = document.getElementById('birthday')
        birthday.onblur = function () {
            let reg = /^(1\d{3}|20[0-1]\d|2020)(\/?-?0\d|\/?-?1[1-2])(\/?-?0\d|\/?-?[1-2]\d|\/?-?3[0-1])$/ig
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        //密码
        var psw = document.getElementById('psw')
        psw.onblur = function () {
            let reg = /^.{6,20}$/
            //\s表示匹配到空格，在this.value这个字符串中匹配空格。
            // 如果有说明输入了空格，search这个方法就会返回下标，就进入else，如果this.value没有空格，search方法就返回-1
            if (reg.test(this.value) && this.value.search(/\s/) == -1) {
                this.nextElementSibling.innerHTML = '√'
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        //确认密码
        var rePsw = document.getElementById('rePsw')
        rePsw.onblur = function () {
            if (this.value === psw.value) {
                this.nextElementSibling.innerHTML = '√'
            } else {
                this.nextElementSibling.innerHTML = 'x'
            }
        }
        var sp = document.getElementsByTagName('span')
        var btn = document.getElementsByTagName('button')[0]
        btn.onclick = function () {
            for (var i = 0; i < sp.length; i++) {
                if (sp[i].innerHTML != "√") {
                    window.alert("你输入错误")
                    break
                } else if (i == sp.length - 1) {
                    window.alert('注册成功')
                } else {
                    continue
                }
            }
        }
    </script>
</body>

</html>